<template>
  <div style="max-height: 80vh; overflow: hidden; overflow-y: auto">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="box-card">
          <template #header>
            <div style="display: flex; justify-content: space-between ;align-items: center;">
              <span class="card_title">装具容量统计</span>
              <el-select v-model="repositorykey" placeholder="请选择库房" size="small">
                <el-option v-for="item in repositoryList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </template>
          <cabinetCapacity ref="cabinetCapacity" :cardHeight="cardHeight"></cabinetCapacity>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="box-card">
          <template #header>
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <span class="card_title"> 在库离库单</span>
              <el-date-picker type="year" value-format="yyyy" v-model="yearRange" placeholder="选择年" size="small">
              </el-date-picker>
            </div>
          </template>
          <outAndInBIll ref="outAndInBIll" :cardHeight="cardHeight"></outAndInBIll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="box-card">
          <template #header>
            <span class="card_title">馆藏统计</span>
          </template>
          <collection :cardHeight="cardHeight"></collection>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <!-- 逾期提醒  单击当前行弹出逾期详情-->
        <el-card class="box-card">
          <template #header>
            <span class="card_title">逾期提醒</span>
            <el-button style="float: right" link @click="handleMore('overdue')">更多</el-button>
          </template>

          <overdueWarring :cardHeight="cardHeight"></overdueWarring>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <!-- 未确认出库单的列表 -->
      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="box-card">
          <template #header>
            <span class="card_title">未确认出库单</span>
            <el-button style="float: right" link @click="handleMore('outBill')">更多</el-button>
          </template>
          <UnconfirmedOutBill :cardHeight="cardHeight"></UnconfirmedOutBill>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="box-card">
          <template #header>
            <span class="card_title">标签违规出库记录</span>
            <el-button style="float: right" link @click="handleMore('trafficData', 'label')">更多</el-button>
          </template>
          <IllegalOutBill :cardHeight="cardHeight"></IllegalOutBill>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UnconfirmedOutBill from './UnconfirmedOutBill.vue'
import overdueWarring from './overdueWarring.vue'
import IllegalOutBill from './IllegalOutBill.vue'
import collection from './collection.vue'
import cabinetCapacity from './cabinetCapacity.vue'
import outAndInBIll from './outAndInBIll.vue'
import { dropDown } from '@/api/bas/repository'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Control',
  components: {
    UnconfirmedOutBill,
    overdueWarring,
    IllegalOutBill,
    collection,
    cabinetCapacity,
    outAndInBIll,
  },
  data() {
    return {
      cardHeight: 300,
      activeName: '1',
      collectionStatistics: [],
      labelType: '',
      timeClass: 'month',
      yearRange: new Date().getFullYear().toString(),
      timeDate1: '',
      repositoryList: [],
      repositorykey: '',
    }
  },
  watch: {
    yearRange(val) {
      this.$refs.outAndInBIll.getOutAndInStatistics(val)
    },
    repositorykey(newVal) {
      this.$refs.cabinetCapacity.getAllCabinet(newVal)
    },
  },
  mounted() {
    this.getDropDown()
  },

  methods: {
    // 获取库房的数据
    getDropDown() {
      dropDown().then((res) => {
        if (res.data.code === 200) {
          this.repositoryList = res.data.data
          this.repositorykey = res.data.data[0].value
        }
      })
    },
    handleMore(router, query) {
      this.$router.push({
        name: router,
        params: { name: query },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.box-card {
  .el-card__header {
    padding: 5px 20px;

    .el-card__body {
      padding: 5px !important;
    }
  }
}

.demo-table-expand .el-form-item {
  margin: 0 10px 0 0;
  color: #99a9bf;

  .el-form-item__content {
    font-size: 12px !important;
  }

  .el-form-item__label {
    font-weight: 600;
    font-size: 12px !important;
  }
}

.button_card {
  cursor: pointer;
  display: flex;
  height: 100%;
  width: 100%;
  padding: 10px 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  &:hover span:nth-child(1) {
    animation: beat 0.3s infinite alternate;
    /*infinite无限循环，alternate动画反向执行回到起点*/
  }

  span:nth-child(1) {
    font-size: 45px;
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  span:nth-child(2) {
    margin: 10px 0 0 0;
  }
}

.base_Info {
  display: flex;
  justify-content: space-between;
}

.card_title {
  font-weight: 700;
  // color: #464646;
  font-size: 18px;
  // 强制一行展示
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-card {
  margin-bottom: 0;
}

:deep(.el-date-editor.el-input) {
  width: 100px;
}

.el-select {
  width: 40%;
}

:deep(.el-card__header) {
  padding: 7px
}
</style>
